<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

    <title>收藏</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css"/>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZSXGYc4z7RLVClUmrlL1w9cH9DRghNuw"></script>
</head>
<style>
    .discover_top {
        width: 100%;
        line-height: 50px;
        background: #6670ff;
        text-align: center;
        font-size: 16px;
        color: #fff;
    }

    .swiper_top {
        background: #fff;
        height: 30px;
        padding: 0 10px;
    }

    .swiper-slide {
        color: #444;
    }

    .swiper-slide-active {
        color: #333;
        font-weight: 700;
        font-size: 16px;
    }

    .swiper-slide-active::after {
        content: "";
        position: absolute;
        bottom: 5px;
        width: 50%;
        left: 0;
        height: 2px;
        border-radius: 1px;
        background: #FFBE00;
    }

    .outer {
        padding: 0 15px;
    }

    .discover_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .discover_content a {
        width: 48%;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px;
        font-size: 0;
        padding-bottom: 10px;
    }

    .discover_content .card img {
        width: 100%;
        height: 140px;
    }

    .goods_title {
        font-size: 16px;
        color: #666;
        margin: 0 10px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 1;
        -moz-box-orient: vertical;
        -o-line-clamp: 1;
        -o-box-orient: vertical;
        -ms-line-clamp: 1;
        -ms-box-orient: vertical;
    }

    .inner_title {
        font-size: 12px;
        color: #666;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shop_name {
        width: 100%;
        overflow: hidden;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 1;
        -moz-box-orient: vertical;
        -o-line-clamp: 1;
        -o-box-orient: vertical;
        -ms-line-clamp: 1;
        -ms-box-orient: vertical;
        color: #0F78FB;
    }

    .card {
        position: relative;
    }

    .price {
        color: #666;
        position: absolute;
        right: 10px;
        top: 100px;
        font-size: 12px;
        color: #fff;
        padding: 0 10px;
        line-height: 20px;
        border-radius: 3px;
        background: rgba(0, 0, 0, .3);
    }
</style>

<body ontouchstart>
<div class="topNav">
    <!--<a href="" onclick="toMe()"><i class="iconfont icon-zuo"></i></a>-->
    <p>收藏</p>
</div>
<div class="block"></div>
<div class="outer">
    <div class="discover_content" id="collectList">


    </div>
</div>

<div class="kong3"></div>
<div class="weui-tabbar">

    <!-- <a class="fb" href="sc-fb.html"></a> -->
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script src="wxJs/utils/contain.js"></script>
<script src="wxJs/utils/storage.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 6
    })

    function listEach(list, active) {
        $(list).click(function () {
            var index = $(list).index(this)
            for (var i = 0; i < $(list).length; i++) {
                $(list).eq(i).removeClass(active)
                $(list).eq(index).addClass(active)
            }
        })
    }

    listEach(".swiper-slide", "swiper-slide-active")

    var currentLat
    var currentLng
    var userId = GetQueryString("userId")
    if (!userId) {
        window.history.back(-1);
    }else {
        getMenu()
    }
    $(function () {
        /*获取用户当前地址*/
        var map = new BMap.Map("allmap");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                currentLat = r.point.lat;   //纬度
                currentLng = r.point.lng;  //经度
                queryMyList()
            } else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true});
    })

    function queryMyList(){
        $.post(getWeiContextPath() + "/wx/shop/queryMyList", {
            userId:userId,
            currentLat: currentLat,
            currentLng: currentLng
        }, function (res) {
            var _collectList = $('#collectList')
            var returnRatio = res.returnRatio;
            $.each(res.list, function (i, obj) {
                var rjf = 1 * obj.discountRatio * (returnRatio * 10);
                _collectList.append('<a href="store.html?shopId=' + obj.shopId + '&userId='+userId+'">\n' +
                    '                <div class="card">\n' +
                    '                    <img src="' + getImgSrc(obj.imgPath) + '" alt="">\n' +
                    '                    <p class="goods_title">' + obj.shopName + '</p>\n' +
                    '                    <div class="inner_title">\n' +
                    '                        <p class="shop_name"> 每消费1元获得' + rjf.toFixed(2) + '积分</p>\n' +
                    '                        <p class="price">' + (obj.distancenum / 1000) + 'km</p>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </a>')
            })
        })
    }

    function getMenu() {
        $('.weui-tabbar').html('<a href="index.html?userId=' + userId + '" class="weui-tabbar__item">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/shouye.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">首页</p>\n' +
            '    </a>\n' +
            '    <a href="discover.html?userId='+userId+'" class="weui-tabbar__item ">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/faxianguanli.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">发现</p>\n' +
            '    </a>\n' +
            '    <a href="javascript:void (0)" class="weui-tabbar__item weui-bar__item--on">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/order1.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">收藏</p>\n' +
            '    </a>\n' +
            '    <a href="me.html?userId=' + userId + '" class="weui-tabbar__item">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/me.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">我的</p>\n' +
            '    </a>')
    }



</script>

</html>